<script setup lang='ts'>
import type { VxeGridInstance, VxeGridProps, VxePagerEvents } from 'vxe-table'

const state = ref({
    catId: '',
    date: '',
    financialId: '',
})
const columns = [
    {
        colProps: {
            span: 6,
        },
        label: '企业名称',
        prop: 'catId',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '企业简称',
        prop: 'catId',
        valueType: 'copy',
    },
]
type RowVO = {
    applicantName: string
    applicantPhone: string
    applicationNumber: string
    catName: string
    createTime: string
    financialName: string
    message: string
    productName: string
}
const xGrid = ref<VxeGridInstance<RowVO>>()
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const gridOptions = reactive<VxeGridProps<RowVO>>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { type: 'checkbox', width: 50 },
        { field: 'applicationNumber', title: '申请单编号' },
        { field: 'productName', title: '产品名称' },
        { field: 'applicantName', title: '登记人姓名' },
        { field: 'applicantPhone', title: '手机号' },
        { field: 'catName', title: '产品分类' },
        { field: 'financialName', title: '金融机构名称' },
        { field: 'createTime', title: '申请时间' },
        { field: 'message', title: '办理结果' },
        { slots: { default: 'operate' }, title: '操作', width: 200 },

    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 380,
    keepSource: true,
    loading: false,
    showOverflow: true,
})
function search() {

}
function reset() { }
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
}
</script>

<template>
    <div class="mb-20 flex bg-white p-30">
        <div class="flex-1 pr-24">
            <PlusForm v-model="state"
                      :columns="columns"
                      :row-props="{ gutter: 20 }"
                      label-width=""
                      :has-footer="false"
            />
        </div>

        <div class="">
            <ElButton type="primary"
                      @click="search"
            >
                搜索
            </ElButton>

            <ElButton @click="reset">
                重置
            </ElButton>
        </div>
    </div>

    <div class="bg-white p-30">
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
        >
            <template #pager>
                <vxe-pager v-model:current-page="tablePage.currentPage"
                           v-model:page-size="tablePage.pageSize"
                           background
                           :total="tablePage.total"
                           :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                           @page-change="handlePageChange"
                />
            </template>
        </vxe-grid>
    </div>
</template>
